import { CustomSubTitle } from "@/components/customTitle";
import LabelToolTip from "@/components/label-tooltip/LabelToolTip";
import CustomTag from "@/components/tag";
import LGV from "@/assets/image/icons/LGV.svg";
import Motorcycle from "@/assets/image/icons/Motorcycle.svg";
import Privatecar from "@/assets/image/icons/privatecar.svg";
import vipBookingStore from "@/store/vipbookingStore";
import { CheckCircleOutlined } from "@ant-design/icons";
import { ProFormText } from "@ant-design/pro-components";
import { Col, Descriptions, Divider, Row, Flex } from "antd";
import styled from "styled-components";
const StyledImg = styled("img")`
  width: 68px;
  height: 68px;
`;

const StyleFlex = styled(Flex)`
  width: 215px;
  height: 124pxpx;
  padding: 16px 24px 16px 24px;
  gap: 8px;
  border-radius: 8px 8px 8px 8px;
  border: 1px solid #7A6145;
  opacity: 0px;
  background: #F7F5F1;
  margin-bottom: 20px;
}
`;
const VehicleInfo = () => {
  const { vipBookingData } = vipBookingStore();

  // 车辆类型到图标的映射
  const vehicleIcons: { [key: string]: string } = {
    "Large Good Vehicle": LGV,
    "Motor Cycle": Motorcycle,
    "Private Car": Privatecar,
  };
  //@ts-ignore
  const iconSrc = vehicleIcons[vipBookingData.vehInfo.vehType] || "";
  console.log(vipBookingData, "vipBookingData");
  return (
    <>
      <CustomSubTitle>Vehicle Information</CustomSubTitle>
      <StyleFlex vertical align="center" justify="center">
        <StyledImg src={iconSrc} alt={"img"} />
        <div>{vipBookingData.vehInfo.vehType}</div>
      </StyleFlex>

      <Row gutter={10}>
        <Col span={8}>
          <div className="lpn-text">
            <ProFormText
              width="md"
              name={"lpnNoInput"}
              placeholder={"Please Enter"}
              label={
                <LabelToolTip
                  label="License Plate Number"
                  tooltipTitle={`Restricted to the letters "I", "O" and "Q".`}
                />
              }
            />
          </div>
        </Col>
        <Col span={12}>
          <ProFormText
            width="md"
            name={"octopus"}
            placeholder={"Please Enter"}
            label="Octopus No. (Exclude the number in the bracket)"
          />
        </Col>
      </Row>

      <Row gutter={10}>
        <Col span={8}>
          <ProFormText
            width="md"
            name={"lpnNo"}
            placeholder={"Please Enter"}
            label={
              <LabelToolTip
                label="Confirm License Plate Number"
                tooltipTitle={`Restricted to the letters "I", "O" and "Q".`}
              />
            }
          />
        </Col>
        <Col span={12}>
          <ProFormText
            width="md"
            name={"octopus"}
            placeholder={"Please Enter"}
            label="Confirm Octopus No. (Exclude the number in the bracket)"
          />
        </Col>
      </Row>

      <Divider plain></Divider>
    </>
  );
};

export default VehicleInfo;
